---
sidebar_position: 7
---

import { FlowToBot } from '../../../../src/js/FlowToBot'
import { YoutubeEmbed } from '../../../../src/js/YoutubeEmbed.jsx'

# Buttons

The Buttons input block allows you to offer your user predefined choices, either single choice options or multiple choices

## Single choice

Single choice input allows you to directly split your flow depending on what the user selects by linking any choice to a specific path in your flow.

Link the "Default" item to determine the default path independent of what the user chooses.

<FlowToBot
  flow={
    <img
      src="/img/blocks/inputs/single-choice-flow.png"
      width="100%"
      style={{ maxWidth: '500px' }}
      alt="Single choice in flow"
    />
  }
  bot={
    <img
      src="/img/blocks/inputs/single-choice-bot.png"
      width="100%"
      style={{ maxWidth: '300px' }}
      alt="Single choice in bot"
    />
  }
/>

## Multiple choices

<FlowToBot
  flow={
    <img
      src="/img/blocks/inputs/multiple-choices-flow.png"
      width="100%"
      style={{ maxWidth: '500px' }}
      alt="Multiple choices in flow"
    />
  }
  bot={
    <video controls width="100%" style={{ maxWidth: '400px' }}>
      <source
        src="/img/blocks/inputs/multiple-choices-bot.mp4"
        type="video/mp4"
      />
    </video>
  }
/>

## Dynamic items

Instead of adding items manually, you can also display a dynamic list of items based on a variable.

<img
  src="/img/blocks/inputs/buttons-dynamic.png"
  alt="Dynamic items list"
  width="600px"
/>

This is useful when you want to display a list of items from another data source. For this to work, you first need to make sure the variable you are using contains a list of values. This list can be extracted from an integration block like Google Sheets.

## How to

### Add a "Other" button

Sometimes you want to allow your user to enter a value that is not in the predefined choices. You can do this by adding a "Other" button and connect it to a "Text" input block.

<img
  src="/img/blocks/inputs/buttons-other.png"
  width="100%"
  style={{ maxWidth: '900px' }}
  alt="Other button flow"
/>

### Different replies based on multiple choices

If you'd like to have different replies based on the multiple choices the user selects. You will need to

1. Save the answer into a variable.
2. Add a "Condition" block
3. Add comparisons based on the value of this variable

<img
  src="/img/blocks/inputs/buttons-condition.png"
  width="100%"
  style={{ maxWidth: '900px' }}
  alt="Condition multiple button flow"
/>

### Conditionally display a certain button

<YoutubeEmbed videoId="c7LhC5BRSIA" />
